<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="问题反馈详情"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">问题描述</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">问题类型</div>
              <div class="value common-value">{{ problemTypeEnum[detail.problemType] || '暂无' }}</div>
            </div>
            <!-- <div class="info-wrap f1">
              <div class="label common-lable">人员角色</div>
              <div class="value common-value">
                {{ softwareTypeEnum[detail.softwareType] || '暂无' }}
              </div>
            </div> -->
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">问题描述</div>
              <div class="value common-value">{{ detail.content || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable" style="height: 100%">照片凭证</div>
              <div class="value common-value" style="min-height: 46px">
                <template v-if="detail.pathList && detail.pathList.length">
                  <img
                    @click="handlePreview(detail.pathList)"
                    :src="`${prefixImg}${item}`"
                    alt=""
                    class="img-style-wrapper"
                    v-for="(item, index) in detail.pathList"
                    :key="index"
                  />
                </template>
                <template v-else>暂无 </template>
              </div>
            </div>
          </div>
        </div>
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">问题反馈</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">反馈人员姓名</div>
              <div class="value common-value">{{ detail.feedbackPersonName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">反馈人员角色</div>
              <div class="value common-value">
                {{ roleType(detail.softwareType) || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">联系电话</div>
              <div class="value common-value">{{ detail.mobile || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">反馈时间</div>
              <div class="value common-value">
                {{ detail.createTime || '暂无' }}
              </div>
            </div>
          </div>
        </div>
        <template v-if="detail.status >= 1">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">问题跟进</div>
          </div>
          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">跟进情况</div>
                <div class="value common-value">{{ detail.followUpDescription || '暂无' }}</div>
              </div>
            </div>
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">操作人员</div>
                <div class="value common-value">{{ detail.followUpPerson || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">跟进时间</div>
                <div class="value common-value">
                  {{ detail.followUpTime || '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="detail.status >= 2">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">问题处理</div>
          </div>
          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">处理情况</div>
                <div class="value common-value">{{ detail.handleDescription || '暂无' }}</div>
              </div>
            </div>
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">操作人员</div>
                <div class="value common-value">{{ detail.handlePerson || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">处理时间</div>
                <div class="value common-value">
                  {{ detail.handleTime || '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div slot="footer"></div>
    </public-modal>
    <HistoryDetail ref="historyDetailRef" :type="titleType" />
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { JeecgListMixinNew } from '@/mixins/JeecgListMixinNew'
import { houseDetails } from '@/api/api'
import { rentingHouseDetails, webpopulationDetails } from '@/api/api'
import HistoryDetail from './feedbackDetail.vue'
import moment from 'moment'
import { getPrefixImg, previewImage, problemTypeEnum, softwareTypeEnum } from '../../../utils/util'
import { feedbackDetail } from '../../../api/api'

export default {
  name: 'actuallyDetail',
  components: { publicModal, startEndTime, HistoryDetail },
  mixins: [JeecgListMixinNew],
  data() {
    return {
      url: {
        list: '/common/project_company_serve_record/page',
      },
      publicVisible: false,
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,
      isTsyfwinfo: {},
      housePopulationlist: [],
      listRecontract: [],
      listHistoricalContract: [],
      historyDetailRef: null,
      titleType: '',
      detail: {},
      problemTypeEnum,
      softwareTypeEnum,
      prefixImg: getPrefixImg(),
    }
  },

  methods: {
    handlePopulationDetail(records) {
      this.$refs.populationDetailRef.show({
        ...records,
        id: records.fId,
      })
    },
    async show(records) {
      this.publicVisible = true
      this.getDetail(records)
    },
    getDetail(records) {
      const params = {
        id: records.id,
      }
      feedbackDetail(params).then((res) => {
        if (res.code == 200) {
          this.detail = res.result
        } else {
        }
      })
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel(target) {
      this.publicVisible = false
    },
    handleHistoryDetail(records, type) {
      this.titleType = type
      this.$refs.historyDetailRef.show(records)
    },
    handlePreview(urls = []) {
      previewImage.call(this, urls)
    },
    roleType(t) {
      return t == 1 ? '民警（App）' : t == 2 ? '网格员' : t == 3 ? '辅警' : '群众'
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

.img-style-wrapper {
  width: 140px;
  height: 124px;
  border-radius: 8px 8px 8px 8px;
  object-fit: cover;
  margin-right: 10px;
}
</style>
